import { Outlet, useNavigate } from '@umijs/max';
import { Button, Space, message } from 'antd';
import { createContext } from 'react';

export const context = createContext<{ api: any }>({ api: null });

export default function Layout() {
  const [messageApi, contextHolder] = message.useMessage();

  const navigate = useNavigate();
  const exit = () => {
    localStorage.clear();
    navigate('/login');
  };

  const adminname = localStorage.getItem('adminname');

  return (
    <context.Provider value={{ api: messageApi }}>
      {contextHolder}
      <header
        style={{
          height: 46,
          borderBottom: '1px solid #eee',
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
        }}
      >
        <Space size="large">
          <span>欢迎你，{adminname}</span>
          <Button onClick={exit}>退出</Button>
        </Space>
      </header>
      <Outlet />
    </context.Provider>
  );
}
